<script>
	//Auto Complete City code
	// +'<span style="position: absolute; right:3px;">' 
	$(document).ready(
			function() {
				$("#fromInput").tokenInputFixed(
						"${pageContext.request.contextPath}/json/airport-json.html",
						{
							onAdd: function (item) {
								if (item.airportName == null) {									
									 $('#txtfromLocation').val(item.cityCode + " - "
												+ item.cityName + ", " + item.countryCode);
								} else{
										$('#txtfromLocation').val(item.airportCode + " - "
												+ item.airportName + ", "
												+ item.countryCode);
								}
							        },
							queryParam : "queryParam",
							propertyToSearch : "cityName",
							placeholder : "enter a city or airport",
							resultsLimit : 10,
							resultsFormatter : function(item) {
								if (item.airportName == null) {
									if(item.stateCode != null)
									{
										return '<li>' + item.cityName + '<span style="position: absolute; right:3px;">' + item.stateCode + ", " 
										+ item.countryCode + '</span></li>';
									}
									else{
										return '<li>' + item.cityName + '<span style="position: absolute; right:3px;">' + item.countryCode + '</span></li>';
									}
								} else{
									if(item.stateCode == null)
									{
										return '<li>'+ item.blankSpace + item.airportCode + " - "
												+ item.airportName + '<span style="position: absolute; right:3px;">'
												 + item.countryCode+ '</span></li>';
									}else{
										return '<li>'+ item.blankSpace + item.airportCode + " - "
										+ item.airportName + '<span style="position: absolute; right:3px;">' + item.stateCode + ", " 
										 + item.countryCode + '</span></li>';
									}
								}
							},
							tokenFormatter : function(item) {
								if (item.airportName == null) {
									return '<li>' + item.cityCode + " - " + item.cityName + ", " + item.countryCode + '</li>';
								} else {
										return "<li>" + item.airportCode + " - "
												+ item.airportName + ", "
												+ item.countryCode + "</li>";
								}
							},
							
							tokenLimit : 1,
							preventDuplicates : true,
							tokenValue : function(item) {
								if (item.airportName == null) {
									return item.cityCode + " - " + item.cityName + ", " + item.countryCode;
								} else {
									
										return item.airportCode + " - "
												+ item.airportName + ", "
												+ item.countryCode;
								
								}
							}
							
						});

// 				var myText = $('ul.token-input-list').contents(':not(span.token-input-delete-token)');
// 				console.log("length: " + myText);
// 				console.log("length: " + myText.length);
// 				console.log("value 1 "+ myText[0].value);
// 				console.log("value 1 "+ myText[0].text);
				
				$("#toInput").tokenInputFixed(
						"${pageContext.request.contextPath}/json/airport-json.html",
						{
							onAdd: function (item) {
								if (item.airportName == null) {									
									 $('#txtfromLocation').val(item.cityCode + " - "
												+ item.cityName + ", " + item.countryCode);
								} else {
										$('#txtfromLocation').val(item.airportCode + " - "
												+ item.airportName + ", "
												+ item.countryCode);
								}
							        },
							queryParam : "queryParam",
							propertyToSearch : "cityName",
							placeholder : "enter a city or airport",
							resultsLimit : 10,
							resultsFormatter : function(item) {
								if (item.airportName == null) {
									if(item.stateCode != null)
									{
										return '<li>' + item.cityName + '<span style="position: absolute; right:3px;">' + item.stateCode + ", " 
										+ item.countryCode + '</span></li>';
									}
									else{
										return '<li>' + item.cityName + '<span style="position: absolute; right:3px;">' + item.countryCode + '</span></li>';
									}
								} else{
									if(item.stateCode == null)
									{
										return '<li>'+ item.blankSpace + item.airportCode + " - "
												+ item.airportName + '<span style="position: absolute; right:3px;">'
												 + item.countryCode+ '</span></li>';
									}else{
										return '<li>'+ item.blankSpace + item.airportCode + " - "
										+ item.airportName + '<span style="position: absolute; right:3px;">' + item.stateCode + ", " 
										 + item.countryCode + '</span></li>';
									}
								}
							},
							tokenFormatter : function(item) {
								if (item.airportName == null) {
									return '<li>' + item.cityCode + " - " + item.cityName + ", " + item.countryCode + '</li>';
								} else {
										return "<li>" + item.airportCode + " - "
												+ item.airportName + ", "
												+ item.countryCode + "</li>";
								}
							},
							
							tokenLimit : 1,
							preventDuplicates : true,
							tokenValue : function(item) {
								if (item.airportName == null) {
									return item.cityCode + " - " + item.cityName + ", " + item.countryCode;
								} else {
										return item.airportCode + " - "
												+ item.airportName + ", "
												+ item.countryCode;
								}
							}
							
						});
				// show value of form f1 : search form
// 				var test = document.getElementsByClassName('token-input-token token-input-highlighted-token');
// 				console.log("test :" + test[0]);
// 				var fromLoc = $("input[id=toInput]").val()
// 				console.log("to: " +fromLoc);
// 				var form_f1 = document.getElementById('f1');
// 				for (i = 0; i < form_f1.length; i++){
// 					console.log("form_f1: " +i + " "+ form_f1[i].value);
// 				}
				
				

				//set value back
				var fromCode="${params.fromLocation}";
				if(!(fromCode==="")){  //for search page: XXX - name, country
					var fromLocation = (fromCode + "  ").replace(",  ", "").trim();

					var pos1 = fromLocation.indexOf("-");
					var pos3 = fromLocation.lastIndexOf(",");

					fromCode=fromLocation.substring(0, pos1 - 1).trim();
					var fromAirport="";
					var fromCountry="";
					if (pos3 == -1) {
						fromAirport=fromAirportfromLocation.substring(pos1 + 2).trim();
					} else {
						fromAirport=fromLocation.substring(pos1 + 2, pos3).trim();
						fromCountry=fromLocation.substring(pos3 + 2).trim();
					}

					$("#fromInput").tokenInputFixed("add", {
						appLocationType: "Airport",
						airportCode : fromCode,
						airportName : fromAirport,
						countryCode : fromCountry
					});
				}
				else{   //task: only Code XXX
					fromCode = "${parameters.fromLocation}";
					console.log("fromLocation"+fromCode);
					if (!(fromCode === "")) {
						console.log("HERE");
						$("#fromInput").tokenInputFixed("add", {
							appLocationType: "Airport",
							airportCode : fromCode,
							airportName : "${parameters.fromAirport}",
							countryCode : "${parameters.fromCountry}"
						});
					}
				}

				//set value back
				var toCode="${params.toLocation}";
				if(!(toCode==="")){  //for search page: XXX - name, country
					var toLocation = (toCode + "  ").replace(",  ", "").trim();

					var pos2 = toLocation.indexOf("-");
					var pos4 = toLocation.lastIndexOf(",");

					toCode=toLocation.substring(0, pos2 - 1).trim();
					var toAirport="";
					var toCountry="";
					if (pos4 == -1) {
						toAirport=toLocation.substring(pos2 + 2).trim();
					} else {
						toAirport=toLocation.substring(pos2 + 2, pos4).trim();
						toCountry=toLocation.substring(pos4 + 2).trim();
					}

					$("#toInput").tokenInputFixed("add", {
						appLocationType: "Airport",
						airportCode : toCode,
						airportName : toAirport,
						countryCode : toCountry
					});
				}
				else{   //task: only Code XXX
					toCode = "${parameters.toLocation}";
					console.log("toCode"+toCode);
					if (!(toCode === "")) {
						$("#toInput").tokenInputFixed("add", {
							appLocationType: "Airport",
							airportCode : toCode,
							airportName : "${parameters.toAirport}",
							countryCode : "${parameters.toCountry}"
						});
					}
				}


			});
</script>